<template>
    <div class="cmain">
        <el-upload
          class="upload-demo"
          drag
          ref="upload"
          action="#"
          accept=".xls"
          :http-request="uploadfile"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
          :auto-upload="false">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">请依次上传用户表,课程表,实验表,班级表四个文件</div>
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过500kb</div>
          <div slot="tip" class="el-upload__tip">
              <el-button type="text" @click="open1">用户要求</el-button>
              <el-button type="text" @click="open2">课程要求</el-button>
              <el-button type="text" @click="open3">实验室要求</el-button>
              <el-button type="text" @click="open4">班级要求</el-button>
          </div>
        </el-upload>
        <div>
              <el-button type="success" @click="submitUpload" class="button">确认上传</el-button>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [
        { name: 'demon.xls' },
        { name: 'demon01.xlsx' }
      ]
    }
  },
  methods: {
    submitUpload () {
      this.$refs.upload.submit()
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    uploadfile (file) {
      var filelist = new FormData()
      filelist.append('file', file.file)
      this.$http.post(
        'https://jsonplaceholder.typicode.com/posts/',
        { 'Content-Type': 'multipart/form-data' },
        filelist
      ).then(res => {
        this.$message.success('文件上传成功')
      })
    },
    open1 () {
      this.$alert('用户需要包含用户名，密码，教师三个属性', '用户要求', {
        confirmButtonText: '确定',
        callback: action => {
        }
      })
    },
    open2 () {
      this.$alert('课程需要包含名称，课时两个属性', '课程要求', {
        confirmButtonText: '确定',
        callback: action => {
        }
      })
    },
    open3 () {
      this.$alert('实验室需要包含名称，类型，大小，位置四个属性', '实验室要求', {
        confirmButtonText: '确定',
        callback: action => {
        }
      })
    },
    open4 () {
      this.$alert('班级需要包含名称，人数两个属性', '班级要求', {
        confirmButtonText: '确定',
        callback: action => {
        }
      })
    }
  }
}
</script>
<style>
.el-upload-list__item-thumbnail{
  background: url('../../assets/img/excell.jpeg')
}
.el-upload.el-upload--picture{
  width: 100%;
}
.el-upload.el-upload--picture .el-upload-dragger{
  width: 100%;
}
</style>
<style lang="less" scoped>
.button{
  width: 100%;
  position: relative;
  top: 20px;
}
.cmain{
  width: 40%;
  height: 60%;
  position: absolute;
  left: 25%;
  border: 1px solid red;
}
.el-upload__tip{
  font-size: 15px;
  font-weight: 500;
  opacity: 0.8;
}
</style>
